import React from 'react';
import { Carousel, List } from 'antd';

import './UserIndex.scss';
import { listBookInfo } from '../../api/bookInfo';
import { Link } from 'react-router-dom';

class UserIndex extends React.Component {
  state = {
    listData: []
  };

  constructor(props) {
    super(props);
    this.state = {
      listData: []
    };
  }

  componentDidMount() {
    this.getListData();
  }

  getListData = () => {
    const bookInfo = {
      sortField: 'create_time',
      order: 'desc'
    };
    listBookInfo(0, 10, bookInfo).then(({ data }) => {
      console.log(data, typeof data, 'data');
      const { list } = data;
      this.setState({
        listData: list
      });
    }).catch((e) => {
      console.log(e, typeof e, 'listBookInfo e');
    });
  };

  render() {
    const { listData } = this.state;
    const renderItem = (item) => (
      <List.Item
        className="book-list-item"
        key={item.isbn}
        extra={
          <img
            width={200}
            alt="logo"
            src={'http://localhost:8077/bookSharing/common/image?fileName=' + item.coverImage}
          />
        }
      >
        <List.Item.Meta
          title={
            <div className="list-item-title">
              <Link to={`/user/book/detail/${item.id}`}>{item.name}</Link>
              {item.borrowed ? (<span className="borrowed">已借阅出</span>) : ''}
              <span className="item-isbn">ISBN: {item.isbn}</span>
            </div>
          }
          description={item.description}
        />
        <pre className="content">{item.desc}</pre>
        <div className="footer">
          <span>分享者：<Link to={`/user/share/${item.ownerUserId}`} className="owner-name">{item.ownerUserName}</Link>
          </span>
          <span className="date">{item.createTime}</span>
        </div>
      </List.Item>
    );

    return (
      <div className="user-index">
        <Carousel autoplay>
          <div className="carousel-item">
            <img
              height={500}
              alt="logo"
              src={'http://localhost:8077/bookSharing/common/image?fileName=144081564257484800.jpg'}
            />
          </div>
          <div className="carousel-item">
            <img
              height={500}
              alt="logo"
              src={'http://localhost:8077/bookSharing/common/image?fileName=144081564257484800.jpg'}
            />
          </div>
          <div className="carousel-item">
            <img
              height={500}
              alt="logo"
              src={'http://localhost:8077/bookSharing/common/image?fileName=144081564257484800.jpg'}
            />
          </div>
        </Carousel>
        <div className="divider">
          最新分享
        </div>
        <List
          itemLayout="vertical"
          dataSource={listData}
          renderItem={renderItem}
        />
      </div>
    );
  }
}

export default UserIndex;
